<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="image" height="100px" width="100px"
     style="border-style:solid;border-color: cornflowerblue;border-width: 1px ">
<br>
<input id="imageFile" type="file">
<br>
<button onclick="onButtonClick()">上传图片</button>
<img src="zoomImage">

<script>
    //data:Image/jpeg;base64
    function onButtonClick() {
        let url = "http://loaclhost/9005/qf/file/zoomForBase64";
        let requestJson = {};
        requestJson.base64 = base64;
        requestJson.width = 50;
        requestJson.height = 50;
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                let r = JSON.parse(xmlhttp.responseText);
                if (r.code == 200) {
                    let zoomBase64 = r.result.base64;
                    document.getElementById("zoomImage").src = "data:image/jpeg;base64," + zoomBase64;
                }
            }
        };
        //打开网络
        xmlhttp.open("POST", url, true);
        //设置Content-Type
        xmlhttp.setRequestHeader("Content-Type", "application/json")

        xmlhttp.send(JSON.stringify(requestJson));
    }

    let  imageFile = document.getElementById("imageFile");
    imageFile.onchange =function (){
        handleFile(imageFile.files)
    }
    function handleFile(files){
        if (files.length>1){
            return ;
        }
        if (files[0]){
            //将文件生成 url
            let  srcValue = window.URL.createObjectURL(files[0]);
            document.getElementById("image").src=srcValue;
            readAsDataURL();
        }
    }
    let base64;
    function readAsDataURL(){
        let file =document.getElementById("imageFile").files[0];
        let reader.reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function (e){
            base64=this.result;
            base64=base64.substring(base64.indexOf(",")+1);
        }
    }

</script>
</body>
</html>